
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="" class="x-strict">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PM2.5浓度场图</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="favicon.ico"
	href="http://chiangbt.github.io/webcontent/favicon.ico"
	type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--引入EXT API和关键CSS，其中custom.css是自定义CSS----->
<script type="text/javascript" src="pm25_files/ext-all.js"></script>
<link rel="stylesheet" href="pm25_files/custom.css">
<link rel="stylesheet" href="pm25_files/leaflet_002.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="../lib/leaflet/leaflet.ie.css"/><![endif]-->
<link rel="stylesheet" href="pm25_files/MarkerCluster.css">
<link rel="stylesheet" href="pm25_files/MarkerCluster_002.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css"/><![endif]-->
<link rel="stylesheet" href="pm25_files/demo.css">
<!--引入leaflet的API----->
<script src="pm25_files/leaflet-0.js"></script>
<script src="pm25_files/leaflet.js"></script>

<script type="text/javascript" src="pm25_files/QuadTree.js"></script>
<script type="text/javascript" src="pm25_files/heatmap.js"></script>
<script type="text/javascript" src="pm25_files/heatmap-leaflet.js"></script>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="pm25_files/leaflet_002.js"></script>
<link rel="stylesheet" href="pm25_files/leaflet.css">
<link rel="stylesheet" href="pm25_files/font-awesome.css">
<script src="pm25_files/pm25.js"></script>
<style>
body {
	margin: 0;
	padding: 0;
}

#map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
}
</style>
</head>
<body id="ext-gen1018" class="x-body x-gecko">
<table width="100%" height="568" border="0" cellpadding="0"	cellspacing="0" bordercolor="#D8EDFF">
	<!--DWLayoutTable-->
	<tr>
		<td height="8" colspan="4" valign="top"></td>
		<td width="98%" valign="top"></td>
		<td width="5" valign="top"></td>
	</tr>
	<tr>
		<td height="5" colspan="3" align="right" valign="top"><img
			src="images/icon1.jpg" width="6" height="5" /></td>
		<td colspan="2" valign="top"><img src="images/icon2.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon3.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td width="7" height="523">&nbsp;</td>
		<td width="5" align="right" valign="top" background="images/icon5.jpg"><img
			src="images/icon5.jpg" width="5" height="5" /></td>
		<td colspan="2" valign="top" bgcolor="#D8EDFF">&nbsp;</td>
		<td valign="top" background="images/main_bg.png">
		<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="STYLE1"
			bgcolor="#D8EDFF">
			<!--DWLayoutTable-->
			<tr>
				<td height="50" width="300" valign="middle"><span class="STYLE1">
				&nbsp;日期时间:<input name="date" type="text" id="date" onclick="new Calendar().show(this);" size="10" maxlength="10" style="width:80px; height:18px;" readonly="readonly" value=""/>
				&nbsp;<select id='time' style="width:80px; height:18px;"></select>
				<input name="Submit2" type="submit" id="reQuery" class="btn1_mouseout" onMouseOver="this.className='btn1_mouseover'" onMouseOut="this.className='btn1_mouseout'" value="更新数据">
				</span></td>
				<td class="STYLE1" width="40%" align="right">
				    <span id="loading" style="background-color: yellow;">正在加载数据...</span>
				</td>
				<td><img height="30px" width="260px" src="images/PM2_5.png" id="illustration"><span id="unit">(µg/m³)</span></td>
			</tr>
			<tr>
				<td width="98%" height="100%" colspan="4" valign="top">
		   			<fieldset id="mapwarpper"><div tabindex="0" class="leaflet-container leaflet-fade-anim" id="map"/></fieldset>
				</td>
			</tr>
</table>
		</td>
		<td valign="top" background="images/icon6.jpg"><img
			src="images/icon6.jpg" width="5" height="100" /></td>
	</tr>

	<tr>
		<td height="5"></td>
		<td valign="top"><img src="images/icon7.jpg" width="5" height="5" /></td>
		<td colspan="3" valign="top"><img src="images/icon8.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon9.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td height="2"></td>
		<td></td>
		<td width="1"></td>
		<td width="6"></td>
		<td></td>
		<td></td>
	</tr>
</table>
	<script>
    map = L.map('map').setView([38.0, 110.0], 4);
    var markers = L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        disableClusteringAtZoom: 12,
        polygonOptions: {
            color: "#2d84c8",
            weight: 4,
            opacity: 1,
            fillOpacity: 0.5
        },
        //设置不同层级圆环的样式，它是根据数字位数来确定css的
        iconCreateFunction: function (cluster) {
            // get the number of items in the cluster
            var count = cluster.getChildCount();
            var digits = (count + "").length;
            return new L.DivIcon({
                html: count,
                className: "cluster digits-" + digits,
                iconSize: null
            });
        }
    });
    
    // Add a CloudMade tile layer with style #999
    var herenormalchn = L.tileLayer('http://1.maps.nlp.nokia.com.cn/maptile/2.1/maptile/933ee1206a/normal.day/{z}/{x}/{y}/256/png8?lg=CHI&app_id=90oGXsXHT8IRMSt5D79X&token=JY0BReev8ax1gIrHZZoqIg&xnlp=CL_JSMv2.5.3.2', {
        attribution: ''
    });
    herenormalchn.addTo(map);

    var heatmapLayer = L.TileLayer.heatMap({
        radius: 20,
        // radius could be absolute or relative
        // absolute: radius in meters, relative: radius in pixels
        //radius: { value: 15000, absolute: true },
        opacity: 0.8,
        gradient: {
            0.35: "rgb(255,0,255)",
            0.45: "rgb(0,0,255)",
            0.55: "rgb(0,255,255)",
            0.65: "rgb(0,255,0)",
            0.95: "yellow",
            1.0: "rgb(255,0,0)"
        }
    });

    // 点聚类
    var ms = [];
    var heatms = []
    var colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple'];
    var awesomeIcons = ['font', 'cloud-download', 'medkit', 'github-alt', 'coffee', 'food', 'bell-alt', 'question-sign', 'star'];
    
    var mydata = {};  
    mydata["timepoint"] = '<s:property value="#parameters.timepoint"/>';
    mydata["pollutant"] = "PM2_5";
    $.ajax({
	    url:'envMapData.action?t='+Math.random(),  
	    type:'GET',  
	    data:mydata,
	    dataType:'json',
	    async:false,
	    timeout: 10000,
	    success:function (data) {
	    	$("#time").innerHTML = "";
	        $.each(data.positionDataMap,function(key, value){
	            if (key == "positionDataList") {
	                if (value == "") {
	                   $("#loading").html("该时段没有数据!");
	                   return false;
	                } else {
					   $(value).each(function (j, positionData) {
			    	   var pollutantData = positionData.showData;
			    	   if (pollutantData > 0 && pollutantData <= 35) {
					    	colort = 0;
					    } else if (pollutantData > 35 && pollutantData <=75) {
					        colort = 1;
					    } else if (pollutantData > 75 && pollutantData <=115) {
					        colort = 2;
					    } else if (pollutantData > 115 && pollutantData <=150) {
					        colort = 3;
					    } else if (pollutantData > 150 && pollutantData <=250) {
					        colort = 4;
					    } else if (pollutantData > 250) {
					        colort = 5;
					    }
					    
					    var color = colors[colort];
				        var awesomeIcon = awesomeIcons[8];
				        var m = new L.Marker(new L.LatLng(positionData.latitude, positionData.longitude), {
				            value: 1,
				            title: positionData.position_name,
				            icon: L.AwesomeMarkers.icon({
				                icon: awesomeIcon,
				                color: color
				            })
				        });
				        var popupText = "<div>监测站:" + positionData.position_name + "<br>PM2.5:" + pollutantData + "</div>";
				        m.bindPopup(popupText);
				        ms.push(m);
				
				        var hm = {'lat': positionData.latitude, 'lng': positionData.longitude, value: pollutantData}
				        heatms.push(hm);
			    	});	                
	                }
	            }
	        });
	    }
    });
    
    markers.addLayers(ms);
    heatmapLayer.addData(heatms);
    heatmapLayer.addTo(map);
    map.addLayer(markers);

</script>

</body>
</html>